<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>倒计时</title>
    <style>
        #wrapper {
            width:300px;
            height:150px;
            line-height: 80px;
            background:#333;
            margin:10px auto;
            text-align:center;
            font-size:16px;
            color:white;
            font-weight:900;
        }
        span {
            width:60px;
            background:white;
            color:#333;
            border:2px solid #ccc;
            padding:0 10px;
            margin:0 10px;
        }
        .box {
            width:255px;
            height:40px;
            line-height: 40px;
            background: blue;
            text-align: center;
            margin:0 auto;
        }
    </style>
</head>
<body>
<div id="wrapper">
    <span></span>分钟<span></span>秒
    <div class="box">开始倒计时</div>
</div>
</body>
</html>
<script>
        var span = document.querySelectorAll('span');
        var box = document.querySelector('.box');
        setTime();
        span[0].innerHTML = 2;
        span[1].innerHTML = 0;
        var shu = 59;
        function setTime(){
            if(span[0].innerHTML==0 && span[1].innerHTML==0){
                span[0].innerHTML = 2;
                span[1].innerHTML = 0;
            }
            else if(span[1].innerHTML ==0){
                span[0].innerHTML -= 1;
                span[1].innerHTML = 59;
                shu = 59;
            }else{
                shu--;
                span[1].innerHTML = shu;
            }
    }
        box.onclick = function(){
            span[0].innerHTML = 2;
            span[1].innerHTML = 0;
            box.style.cursor = 'pointer';
        };
        window.setInterval(function(){
            setTime();
        },1000);
</script>
